<template>
  <div
    class="tablecontainer flex justify-center overflow-auto"
    :style="{ height: '290px', width: '400px' }"
  >
    <table>
      <thead>
        <tr :style="{ background: '#223C83' }" class="sticky top-0">
          <th :style="{ color: '#AAB6FF' }">{{ keyvalue.name1 }}</th>
          <th :style="{ color: '#6EE7B7' }">{{ keyvalue.name2 }}</th>
          <th :style="{ color: '#FCD34D' }">{{ keyvalue.name3 }}</th>
          <th :style="{ color: '#2ad0ff' }">{{ keyvalue.name4 }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="line in inform" :key="line.name">
          <td>
            <div class="flex justify-center">
              <img :src="keyvalue.photo" alt="" />
            </div>
          </td>
          <td :style="{ color: '#6EE7B7' }">{{ line.name }}</td>
          <td :style="{ color: '#FCD34D' }">{{ line.type1 }}</td>
          <td :style="{ color: '#2ad0ff' }">{{ line.time }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
defineProps({
  inform: Array,
  keyvalue: Object,
})
</script>
<style lang="postcss" scoped>
td,
th {
  text-align: center;
  width: 25%;
}
table {
  /* margin-top: 18px;
  margin-right: 40px; */
  width: 370px;
}
tr {
  height: 55px;
}
.tablecontainer::-webkit-scrollbar {
  display: none;
}
.tablecontainer {
  scrollbar-width: none;
  padding-top: 18px;
  /* padding-right: 20px; */
  padding-left: 2px;
}
</style>
